// 点击成绩录入会有数据显示
// 调用一个函数 发送请求 获取数据 渲染页面
const tbody = document.querySelector('tbody');

//  发送请求获取成绩数据 渲染页面
function getScoreList() {
    axios.get('/score/list').then((result) => {
        if (result.data.code === 0) {
            // console.log(result.data.data);
            const obj = result.data.data;
            // 遍历对象 生成html标签
            let html = '';

            for (const key in obj) {
                // 根据成绩 数组来动态生成 多个ta标签
                const tempHTML = obj[key].score.reduce((h, v, i) =>
                    h +
                    `<td class="score">${v}  <input type="text" data-batch="${i + 1
                    }"  data-id="${key}" / > </td>`
                    , '');
                html += `
                <tr>
                <th scope="row">${key}</th>
                 <td>${obj[key].name}</td>
                ${tempHTML}  
                </tr>
                `
            }
            //把html渲染出来
            tbody.innerHTML = html;

            const inputs = document.querySelectorAll('tbody input'); // 获取tbody里面所有的input 遍历的方式绑定 事件
            inputs.forEach((input) =>
              // 绑定失去焦点事件
              input.addEventListener('blur', function (e) {
                // input.value
                // 准备 接口要求的数据
                const data = {
                  // 学员id
                  stu_id: input.dataset.id,
                  // 成绩的次数
                  batch: input.dataset.batch,
                  // 分数
                  score: input.value,
                };
      
                // 数据校验 通过了 才允许发送给后端   省略
      
                // 发送给后端 完成修改
                axios.post('/score/entry', data).then((result) => {
                  if (result.data.code === 0) {
                    // 提示
                    toastr.success(result.data.message);
                    // 获取最新数据 渲染
                    getScoreList();
                  }
                });
              })
            );
          }
        });
      }
      
getScoreList();
// 先给分数 单元格绑定单元格双击事件
tbody.addEventListener('dblclick', function (e) {
    if (e.target.nodeName === 'TD' && e.target.classList.contains('score')) {
        // 如果鼠标双击了单元格  或者 鼠标双击了数字
        const input = e.target.querySelector('input');
        input.style.display = 'block';
        input.value = e.target.innerText;
        input.focus();
    }
})